adjust download section of photo_detail/session_detail
Brightcells
共有 2 個文件被更改，包括 74 次插入 和 132 次删除
+ 25
- 121
photo/templates/photo/photo_detail.html
@@ -8,118 +8,22 @@ |
||
| 8 | 8 |
<meta name="format-detection" content="telephone=no,email=no,address=no"> |
| 9 | 9 |
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> |
| 10 | 10 |
<title>照片详情</title> |
| 11 |
- <script>!function(){var d=document.documentElement;d.style.fontSize=d.clientWidth*0.05+'px'}()</script>
|
|
| 12 | 11 |
<style> |
| 13 |
-{# index.css#}
|
|
| 14 |
- *, :after, :before {
|
|
| 15 |
- box-sizing: border-box; |
|
| 16 |
- outline: none; |
|
| 17 |
- } |
|
| 18 |
-{# Body#}
|
|
| 19 |
- body {
|
|
| 20 |
- color: #333; |
|
| 21 |
- font-family: -apple-system,Arial,Microsoft YaHei,Helvetica Neue,sans-serif; |
|
| 22 |
- -webkit-font-smoothing: antialiased; |
|
| 23 |
- text-rendering: optimizeLegibility; |
|
| 24 |
- background-color: #fff; |
|
| 25 |
- } |
|
| 26 |
- body {
|
|
| 27 |
- margin: 0; |
|
| 28 |
- } |
|
| 29 |
-{# A#}
|
|
| 30 |
- a {
|
|
| 31 |
- color: #000; |
|
| 32 |
- text-decoration: none; |
|
| 33 |
- -webkit-transition: color,.3s; |
|
| 34 |
- transition: color,.3s; |
|
| 35 |
- } |
|
| 36 |
- a {
|
|
| 37 |
- background-color: transparent; |
|
| 38 |
- } |
|
| 39 |
-{# Img#}
|
|
| 40 |
- img {
|
|
| 41 |
- border: 0; |
|
| 42 |
- } |
|
| 43 |
-{# Container#}
|
|
| 44 |
- .container {
|
|
| 45 |
- width: 960px; |
|
| 46 |
- margin-left: auto; |
|
| 47 |
- margin-right: auto; |
|
| 48 |
- position: relative; |
|
| 49 |
- } |
|
| 50 |
- @media (max-width: 960px) {
|
|
| 51 |
- .container {
|
|
| 52 |
- width: 100%; |
|
| 53 |
- } |
|
| 54 |
- } |
|
| 55 |
- .text-center {
|
|
| 56 |
- text-align: center; |
|
| 57 |
- } |
|
| 58 |
-{# Article#}
|
|
| 59 |
- article {
|
|
| 60 |
- display: block; |
|
| 61 |
- } |
|
| 62 |
-{# app.css#}
|
|
| 63 |
- html, body {
|
|
| 64 |
- height: 100%; |
|
| 65 |
-{# overflow: hidden;#}
|
|
| 66 |
- } |
|
| 67 |
- .container {
|
|
| 68 |
- position: relative; |
|
| 69 |
- width: 100%; |
|
| 70 |
- height: 100%; |
|
| 71 |
- background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1)); |
|
| 72 |
- } |
|
| 73 |
- img {
|
|
| 74 |
- width: 100%; |
|
| 75 |
- } |
|
| 12 |
+ body {position:absolute;top:0;right:0;bottom:0;left:0;margin:0;font-family:"Microsoft YaHei","sans-serif","Microsoft Sans Serif","Microsoft JhengHei UI";background:#fff6e6;color:gray}
|
|
| 13 |
+ img {width:100%}
|
|
| 76 | 14 |
|
| 77 |
- .download_section {
|
|
| 78 |
- position: absolute; |
|
| 79 |
- right: 0; |
|
| 80 |
- bottom: 0; |
|
| 81 |
- left: 0; |
|
| 82 |
- height: 55px; |
|
| 83 |
- padding: 5px; |
|
| 84 |
- background: #f0f0f0; |
|
| 85 |
- box-sizing: border-box; |
|
| 86 |
- } |
|
| 87 |
- .pai2_icon {
|
|
| 88 |
- width: 45px; |
|
| 89 |
- height: 45px; |
|
| 90 |
- float: left; |
|
| 91 |
- } |
|
| 92 |
- .pai2_icon>img {
|
|
| 93 |
- width: 100%; |
|
| 94 |
- height: 100%; |
|
| 95 |
- } |
|
| 96 |
- .pai2_desc {
|
|
| 97 |
- height: 45px; |
|
| 98 |
- padding: 3px 0 0 5px; |
|
| 99 |
- float: left; |
|
| 100 |
- } |
|
| 101 |
- .pai2_name {
|
|
| 102 |
- font-size: 15px; |
|
| 103 |
- text-align: left; |
|
| 104 |
- } |
|
| 105 |
- .pai2_des {
|
|
| 106 |
- padding-top: 7px; |
|
| 107 |
- font-size: 12px; |
|
| 108 |
- line-height: 23px; |
|
| 109 |
- color: #8f8f8f; |
|
| 110 |
- text-align: left; |
|
| 111 |
- } |
|
| 112 |
- .pai2_download {
|
|
| 113 |
- position: relative; |
|
| 114 |
- top: 5px; |
|
| 115 |
- width: 100px; |
|
| 116 |
- height: 35px; |
|
| 117 |
- line-height: 35px; |
|
| 118 |
- text-align: center; |
|
| 119 |
- background: #d13621; |
|
| 120 |
- color: #fff; |
|
| 121 |
- border-radius: 5px; |
|
| 122 |
- float: right |
|
| 15 |
+ /* For Download Section */ |
|
| 16 |
+ .download_section {position:fixed;right:0;bottom:0;left:0;height:55px;padding:5px;background:#f0f0f0;box-sizing:border-box}
|
|
| 17 |
+ .pai2_icon {width:45px;height:45px;float:left}
|
|
| 18 |
+ .pai2_icon>img {width:100%;height:100%}
|
|
| 19 |
+ .pai2_desc {height:45px;padding:5px 0 0 5px;float:left}
|
|
| 20 |
+ .pai2_name {padding-top:2px;font-size:14px;text-align:left}
|
|
| 21 |
+ .pai2_des {padding-top:2px;font-size:12px;line-height:23px;color:#8f8f8f;text-align:left}
|
|
| 22 |
+ .pai2_download {position:relative;top:5px;width:100px;height:35px;line-height:35px;text-align:center;background:#d13621;color:#fff;border-radius:5px;float:right}
|
|
| 23 |
+ /* For PC */ |
|
| 24 |
+ body, .download_section {
|
|
| 25 |
+ max-width: 414px !important; |
|
| 26 |
+ margin: 0 auto !important; |
|
| 123 | 27 |
} |
| 124 | 28 |
</style> |
| 125 | 29 |
</head> |
@@ -127,18 +31,18 @@ |
||
| 127 | 31 |
<div class="container"> |
| 128 | 32 |
<article class="text-center"> |
| 129 | 33 |
<img src="{{ photo_url }}">
|
| 130 |
- |
|
| 131 |
- <div id="download_section" class="download_section"> |
|
| 132 |
- <div class="pai2_icon"> |
|
| 133 |
- <img src="{% static 'pai2/img/paiai_96_96.png' %}">
|
|
| 134 |
- </div> |
|
| 135 |
- <div class="pai2_desc"> |
|
| 136 |
- <div class="pai2_name">拍爱</div> |
|
| 137 |
- <div class="pai2_des">即拍即分享</div> |
|
| 138 |
- </div> |
|
| 139 |
- <div id="pai2_download" class="pai2_download">立即下载</div> |
|
| 140 |
- </div> |
|
| 141 | 34 |
</article> |
| 142 | 35 |
</div> |
| 36 |
+ |
|
| 37 |
+ <div id="download_section" class="download_section"> |
|
| 38 |
+ <div class="pai2_icon"> |
|
| 39 |
+ <img src="{% static 'pai2/img/paiai_96_96.png' %}">
|
|
| 40 |
+ </div> |
|
| 41 |
+ <div class="pai2_desc"> |
|
| 42 |
+ <div class="pai2_name">拍爱</div> |
|
| 43 |
+ <div class="pai2_des">即拍即分享</div> |
|
| 44 |
+ </div> |
|
| 45 |
+ <div id="pai2_download" class="pai2_download">立即下载</div> |
|
| 46 |
+ </div> |
|
| 143 | 47 |
</body> |
| 144 | 48 |
</html> |
+ 49
- 11
photo/templates/photo/session_detail.html
@@ -1,12 +1,50 @@ |
||
| 1 |
+{% load staticfiles %}
|
|
| 2 |
+ |
|
| 1 | 3 |
<!DOCTYPE html> |
| 2 |
-<html> |
|
| 3 |
-<head lang="en"> |
|
| 4 |
- <meta charset="UTF-8"> |
|
| 5 |
- <title></title> |
|
| 6 |
-</head> |
|
| 7 |
-<body> |
|
| 8 |
- {% for photo in photos %}
|
|
| 9 |
- <div><img src="{{ photo.p_photo_url }}"></div>
|
|
| 10 |
- {% endfor %}
|
|
| 11 |
-</body> |
|
| 12 |
-</html> |
|
| 4 |
+<html lang="zh-CN"> |
|
| 5 |
+ <head> |
|
| 6 |
+ <meta charset="utf-8"> |
|
| 7 |
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|
| 8 |
+ <meta name="format-detection" content="telephone=no,email=no,address=no"> |
|
| 9 |
+ <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> |
|
| 10 |
+ <title>照片详情</title> |
|
| 11 |
+ <style> |
|
| 12 |
+ body {position:absolute;top:0;right:0;bottom:0;left:0;margin:0;font-family:"Microsoft YaHei","sans-serif","Microsoft Sans Serif","Microsoft JhengHei UI";background:#fff6e6;color:gray}
|
|
| 13 |
+ img {width:100%}
|
|
| 14 |
+ |
|
| 15 |
+ /* For Download Section */ |
|
| 16 |
+ .download_section {position:fixed;right:0;bottom:0;left:0;height:55px;padding:5px;background:#f0f0f0;box-sizing:border-box}
|
|
| 17 |
+ .pai2_icon {width:45px;height:45px;float:left}
|
|
| 18 |
+ .pai2_icon>img {width:100%;height:100%}
|
|
| 19 |
+ .pai2_desc {height:45px;padding:5px 0 0 5px;float:left}
|
|
| 20 |
+ .pai2_name {padding-top:2px;font-size:14px;text-align:left}
|
|
| 21 |
+ .pai2_des {padding-top:2px;font-size:12px;line-height:23px;color:#8f8f8f;text-align:left}
|
|
| 22 |
+ .pai2_download {position:relative;top:5px;width:100px;height:35px;line-height:35px;text-align:center;background:#d13621;color:#fff;border-radius:5px;float:right}
|
|
| 23 |
+ /* For PC */ |
|
| 24 |
+ body, .download_section {
|
|
| 25 |
+ max-width: 414px !important; |
|
| 26 |
+ margin: 0 auto !important; |
|
| 27 |
+ } |
|
| 28 |
+ </style> |
|
| 29 |
+ </head> |
|
| 30 |
+ <body> |
|
| 31 |
+ <div class="container"> |
|
| 32 |
+ <article class="text-center"> |
|
| 33 |
+ {% for photo in photos %}
|
|
| 34 |
+ <div><img src="{{ photo.p_photo_url }}"></div>
|
|
| 35 |
+ {% endfor %}
|
|
| 36 |
+ </article> |
|
| 37 |
+ </div> |
|
| 38 |
+ |
|
| 39 |
+ <div id="download_section" class="download_section"> |
|
| 40 |
+ <div class="pai2_icon"> |
|
| 41 |
+ <img src="{% static 'pai2/img/paiai_96_96.png' %}">
|
|
| 42 |
+ </div> |
|
| 43 |
+ <div class="pai2_desc"> |
|
| 44 |
+ <div class="pai2_name">拍爱</div> |
|
| 45 |
+ <div class="pai2_des">即拍即分享</div> |
|
| 46 |
+ </div> |
|
| 47 |
+ <div id="pai2_download" class="pai2_download">立即下载</div> |
|
| 48 |
+ </div> |
|
| 49 |
+ </body> |
|
| 50 |
+</html> |